<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>很简单的Blog</title>
<style>
#header {
	width: 800px;
	margin: auto;
	padding-bottom: 50px;
}
#header p {
	margin-left: 100px;
}
#blog_list {
	width: 700px;
	margin: auto;
}
.blog_summary {
	margin-bottom: 50px;
	padding: 50px;
	box-shadow: 3px 3px 8px 3px #031240;
	text-indent:2em;
	line-height: 162%;
	background-color: #FFFFFA;
}
.blog_time {
	color: #565656;
	font-weight: bold;
	font-size: 14px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>

<div id="header">
	<h1>老雷的实验室</h1>
	<p>
		人因梦想而伟大。
	</p>
</div>

<div id="blog_list">
</div>

</body>
<script>
$(function() {
	$(document).ready(function () {
		readId(parseInt(window.location.hash.substr(1)));
	});
});

var blog = {};

function readId(id) {
	$.getJSON('$read.js', {id: id}, function (d) {
		if (d.error) {
			alert(d.error);
		}
		else if (!d.resoult) {
			alert('指定的文章不存在！');
		}
		else {
			var html = getSummary(d.resoult);
			$('#blog_list').append(html);
		}
	});
}

// 生成文章摘要信息
function getSummary(a) {
	return '<div class="blog_summary"><h2>' + a.title + '</h2>' +
		'<span class="blog_time">最后修改时间：' + getTimeString(a.last_modified * 1000) + '</span>' +
		'<p class="blog_body">' + a.body + '</p></div>';
}

// 生成时间文本
function getTimeString(ts) {
	var t = new Date(ts);
	return t.getFullYear() + '/' + t.getMonth() + '/' + t.getDay() + ' ' + t.getHours() + ':' + (t.getMinutes() < 10 ? '0' + t.getMinutes() : t.getMinutes());
}

</script>
</html>